<template>
  <div class="top-container">
    <div class="left-box">
      <div class="icon-wrapper">
        <span @click="$router.replace('/')" class="iconfont icon-home"></span>
        <span class="iconfont icon-sami-select"></span>
        <span class="iconfont icon-full-screen"></span>
      </div>
      <div class="history-wrapper">
        <span @click="$router.go(-1)" class="iconfont el-icon-arrow-left"></span>
        <span @click="$router.go(1)" class="iconfont el-icon-arrow-right"></span>
      </div>
    </div>
    <div class="right-box">
      <el-input size="small" @keyup.enter.native="toResult" placeholder="搜索" v-model.trim="query">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top',
  data(){
    return {
      query:''
    }
  },
  methods:{
    toResult(){
      if(!this.query){
        this.$message.warning('请输入查询内容')
      }else{
        this.$router.push(`/result?keywords=${this.query}`)
      }
    }
  },
};
</script>

<style lang="less" scoped>
.top-container {
  z-index: 100;
  height: 60px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #f9f9f9;
  width: 100%;
  .left-box {
    display: flex;
    // 图标
    .icon-wrapper {
      margin-right: 80px;
      .iconfont {
        margin-right: 10px;
        font-size: 12px;
        width: 18px;
        height: 18px;
        display: inline-block;
        text-align: center;
        line-height: 18px;
        &::before {
          opacity: 0;
          transition: 0.2s;
        }
        &:hover::before {
          opacity: 1;
        }
        &.icon-home {
          background-color: #dd6d60;
          border-radius: 50%;
        }
        &.icon-sami-select {
          background-color: #dcc060;
          border-radius: 50%;
        }
        &.icon-full-screen {
          background-color: #84bb58;
          border-radius: 50%;
        }
      }
    }
    // 历史管理
    .history-wrapper {
      display: flex;
      align-items: center;
      .iconfont {
        width: 35px;
        height: 35px;
        font-size: 30px;
        text-align: center;
        line-height: 35px;
        color: gray;
        border-radius: 50%;
        transition: 0.2s;
        cursor: pointer;
        &:first-child {
          margin-right: 10px;
        }
        &:hover {
          background-color: #ebebeb;
        }
      }
    }
  }
  .right-box {
    display: flex;
    align-items: center;
  }
}
</style>
